<template>
    <div class="counter counter--style1 bg--cover" :style="`background-image:url(${$config.public.baseUrl}images/counter/home2/bg.png)`">
        <div class="container">
            <div class="counter__wrapper">
                <div class="row g-5">
                    <div v-for="(item, idx) in counters" :key="idx" class="col-md-3 col-6">
                        <div class="counter__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                            <div class="counter__item-inner">
                                <div class="counter__item-thumb">
                                    <img :src="item.icon" alt="count-icon">
                                </div>
                                <div class="counter__item-content">
                                    <h3>
                                        <Counter parentQuerySelector=".counter__wrapper" class="counter" :end="item.value" />K
                                    </h3>
                                    <h5>{{ item.label }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Counter from '@/components/base/Counter.vue'
export default {

    components: { Counter },
    props: {
        counters: {
            type: Array,
            required: true,
            default: () => []
        },
    }
}
</script>

<style></style>